<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
       $(function () {
           // $('input').bind('click',function (event) {
           //     // alert(event);// 返回值 [object MouseEvent]
           //     // alert(event.type);//返回值click
           //     // alert(event.target);//返回值 [object HTMLInputElement] target谁触发的
           //     alert(event.currentTarget);//返回值[object HTMLInputElement]
           // });

           // $('div').bind('click',function (event) {
           //      // alert(event.target);// 当点击div模块时 返回值 [object HTMLDivElement] 当点击span模块时 返回[object HTMLSpanElement]
           //      // alert(event.currentTarget);//给谁绑定的 返回值就是谁 当点击div模块时 或者点击span模块时 返回都是div
           //
           // });

            // $('div').bind("mouseover",function (event) {
            // alert(event.relatedTarget);//鼠标移入div 获得移入之前的dom对象 返回 [object HTMLBodyElement]
            //    // 鼠标移入span 返回的是[object HTMLDivElement] 从div移入的，从span移入 返回值[object HTMLInputElement]
            //  });
           // $('span').bind("mouseout",function (event) {
           //     alert(event.relatedTarget);//鼠标移出span 获得移出之前后dom对象 返回上一个元素对象 [object HTMLDivElement]
           //     // 鼠标移出div 返回的是[object HTMLBodyElement]
           // });
           // $('input').bind('click',123,function (event) {
           //      alert(event.data); //写上数字  返回的是123
           // });
           // $('input').bind('click',"abc",function (event) {
           //     alert(event.data); //写上字符串  返回的是字符串abc
           // });
           // $('input').bind('click',[1,3],function (event) {
           //     alert(event.data); //写上数组  返回的是数组 1，3
           // });
           // $('input').bind('click',{"name":"长江","age":25},function (event) {
           //     alert(event.data.age); //写上对象 返回25
           // });
           // $('input').bind('click',{"name":"长江","age":25},function (event) {
           //     alert(event.timeStamp); //获得时间戳 返回值1982.3300000280142
           // });

           // $(document).bind('click',function (event) { //获取相对于页面原点的水平/垂直坐标 如果发生滚动 需要加滚动距离+可见屏幕的坐标
           //  alert(event.pageX+":"+event.pageY);
           // });
           // $(document).bind('click',function (event) {//获取显示器屏幕卫视的水平/垂直坐标(非jquery 封装) 原生的属性
           //     alert(event.screenX+":"+event.screenY);
           // });
           // $(document).bind('click',function (event) {//取相对于页面可视窗口的水平垂直坐标(非jquery 封装)原生的属性
           //  alert(event.clientX+":"+event.clientY);
           // });
           // $(document).bind('click',function (event){//获取鼠标左中右键(1,2,3)获取键盘按键
           //     alert(event.which);
           // });
           $(document).bind('click',function (event){ //点击鼠标左键 false 点击shift+鼠标左键返回true
               alert(event.shiftKey);
           });
       });
    </script>
</head>
<body>
    <input type="button" value="button">
    <div style="width: 200px;height: 200px;background-color: gray">
        <span style="width: 100px;height: 100px;background-color: red;display: block"></span>
    </div>
    <P>12</P><P>12</P><P>12</P><P>12</P><P>12</P><P>12</P>
    <P>12</P><P>12</P><P>12</P><P>12</P><P>12</P><P>12</P>
    <P>12</P><P>12</P><P>12</P><P>12</P><P>12</P><P>12</P>
    <P>12</P><P>12</P><P>12</P><P>12</P><P>12</P><P>12</P>
<script>
    /* 事件对象
        JavaScript在事件处理函数中默认传递了event对象也就是事件对象 注意:前提是有事件在先
        1.事件对象获得的公式
        2.事件对象的常用属性
        type :获得绑定事件类型的字符串名称
        target 获得 触发 元素的DOM对象
        currentTarget 获取 监听 元素的DOM对象等同于this
        relatedTarget 获取 移入或者移出 目标点离开或进入的哪个 DOM 对象

        data：获得事件调用时的额外数据(数字 字符串 数组 对象)
        timeStamp 获取事件触发的时间戳
        pageX/pageY获取相对于页面原点的水平/垂直坐标
        screenX/screenY获取显示器屏幕卫视的水平/垂直坐标(非jquery 封装) 原生的属性
        clientX/clientY 获取相对于页面可视窗口的水平垂直坐标(非jquery 封装)原生的属性
        result 获取上一个相同事件的返回值

        which 获取鼠标左中右键(1,2,3)获取键盘按键
        altKey(shiftKey ctrlKey metaKey)获取是否按下alt shift ctrl（这三个非jquery 封装）
        或meta键（IE 原生meta键  jquery 做了封装）


    * */
</script>
</body>
</html>